import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {

        shops: [{
                id: 1,
                name: "可乐",
                price: 3.50,
                introduction: "可口可乐",
                count: 1,
                inventory: 10, //现有库存
            },
            {
                id: 2,
                name: "芬达",
                price: 3.20,
                introduction: "百事芬达",
                count: 1,
                inventory: 10,
            },
            {
                id: 3,
                name: "康师傅方便面",
                price: 4.10,
                introduction: "康师傅牌桶装方便面",
                count: 1,
                inventory: 10,
            },
            {
                id: 4,
                name: "法式小面包",
                price: 10.00,
                introduction: "盼盼牌法式小面包，谁吃谁说好",
                count: 1,
                inventory: 10,
            }

        ],
        shopInventory: 10, //单个商品起始总库存
        urls: [
            { id: 1, src: require("../img/bread.jpg") }
        ],
        added: [] //add有几条i数据证明购物车有几种商品
    },
    mutations: {
        addToCart(state, { id }) {

            //对应商品的库存删减
            const commodity = state.shops.find((shop) => {
                return shop.id == id //仓库商品的每一项id==页面每一项的id
            })
            if (!commodity) return;

            //start加入购物车
            const commodityInCart = state.added.find(item => item.id == id);
            if (!commodityInCart) {
                state.added.push({...commodity, num: 1 })
            } else {
                commodityInCart.num++
            }
            //end加入购物车
            commodity.inventory--;

        },
        delCommoditys(state, product) {
            //console.info(state,product)
            state.added.forEach((item, index) => {
                if (item.id == product.id) {
                    //console.info( item )
                    //找到index的下标值
                    state.added.splice(index, 1);
                }
            })
            state.shops.forEach((shop) => {
                if (shop.id == product.id) {
                    shop.inventory = state.shopInventory
                }
            })

        },
        NUM_CHANGE(state, { id, value }) {
            state.added.forEach((item) => {
                if (item.id == id) {
                    item.num = value;
                }
            });
            //购物车列表计数器改变 改变现有库存
            state.shops.forEach((shop) => {
                if (shop.id == id) {
                    shop.inventory = state.shopInventory - value
                }
            })
        },
        CLEAR(state) {
            state.added = []
            state.shops.forEach((shop) => {
                shop.inventory = state.shopInventory
            })
        },
        checkAllCommoditiesInCart(state) {
            state.added.forEach(commodity => {
                commodity.checked = true;
            })
        }
    },
    getters: {
        goodList: state => {
            return state.shops.map(item => {
                return {
                    id: item.id,
                    name: item.name,
                    price: item.price.toFixed(2),
                    inventory: item.inventory //商品列表增加库存显示
                }
            })
        },
        cartProducts: state => {
            return state.added.map(({ id, num }) => {
                let product = state.shops.find(item => item.id == id)
                    // console.info('product',product)
                return {
                    id: product.id,
                    name: product.name,
                    price: product.price.toFixed(2),
                    num,
                    total_num: (product.price * num).toFixed(2)
                }
            })
        },
        totalPrice: (state, getters) => {
            let total = 0;
            getters.cartProducts.forEach(item => {
                total += item.price * item.num
            })
            return total.toFixed(2);
        },

    },
    actions: {

        numChange({ commit }, data) {
            commit('NUM_CHANGE', {
                id: data.id,
                value: data.value
            })
        },

    },
    modules: {}
})